<template>
  <div id="app">
    <img src="./assets/logo.png"><br>
    <el-button @click="show = !show" style="width:190px;">
      <span v-if="show">隐藏</span>
      <span v-if="!show">显示</span>
    </el-button>
    <br><br>
    <transition name="el-zoom-in-center">
      <div v-show="show">
        <el-Button><router-link to="/app5">app5</router-link></el-Button>
        <el-Button><router-link to="/">HelloVue</router-link></el-Button>
        <el-Button><router-link to="/element">Element</router-link></el-Button>
        <el-Button><router-link to="/message">Message</router-link></el-Button>
        <el-Button><router-link to="/notify">Notification</router-link></el-Button>
        <el-Button><router-link to="/carousel">Carousel</router-link></el-Button>
      </div>
    </transition>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      show: true
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
